import React from 'react'
import CircleLoveItem from './CircleLoveItem'
import { CircleLove } from '../../myTypes'

export default function CircleLoveList(props: {
  style: {
    readonly [key: string]: string
  }
  leftSelect: Array<CircleLove>
  rightSelect: Array<CircleLove>
}) {
  const { style, leftSelect, rightSelect } = props
  return (
    <div className={style['select-list']}>
      <div className={style['select-items']}>
        {leftSelect.map((s, i) => {
          return <CircleLoveItem style={style} i={i} s={s} key={s.id} />
        })}
      </div>
      <div className={style['select-items']}>
        {rightSelect.map((s, i) => {
          return <CircleLoveItem style={style} i={i} s={s} key={s.id} />
        })}
      </div>
    </div>
  )
}
